<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<title>企动客服知识库</title>
<link rel="stylesheet" href="css/layui.css">
<script src="https://cdn.jsdelivr.net/clipboard.js/1.5.12/clipboard.min.js"></script> 
</head>
<body>
<div class="layui-layout layui-layout-admin">
  <div class="layui-header">
    <div class="layui-logo"><img src="img/logo.png" alt=""><span>企动</span><b>客服知识库</b></div>
    <!-- 头部区域（可配合layui已有的水平导航） -->
    <ul class="layui-nav layui-layout-left">
      <li class="layui-nav-item layui-this"><a href="zsk.html">知识库</a></li>
      <li class="layui-nav-item"><a href="gdMangement.html">工单管理</a><span class="layui-badge">66</span></li>
      <li class="layui-nav-item"><a href="cjwt.html">常见问题</a></li>
    </ul>
    <ul class="layui-nav layui-layout-right">
      <li class="layui-nav-item">
        <a href="javascript:;" class="exit">
          <img src="http://t.cn/RCzsdCq" class="layui-nav-img">
          退出登录
        </a>
      </li>
    </ul>
  </div> 
  <div class="layui-body" style="left: 0">
    <!-- 内容主体区域 -->
    <div style="padding: 20px 50px;">
      <div class="layui-tab layui-tab-brief" lay-filter="docDemoTabBrief" style="margin:0">
        <ul class="layui-tab-title">
          <li class="layui-this">全部</li>
          <li>售前</li>
          <li>售后</li>
          <li>特殊</li>
          <li>其他</li>
          <li>售前</li>
          <li>售后</li>
          <li>特殊</li>
          <li>其他</li>
          <li>售前</li>
          <li>售后</li>
          <li>特殊</li>
          <li>其他</li>
          <li>售前</li>
          <li>售后</li>
          <li>特殊</li>
          <li>其他</li>
          <li>售前</li>
          <li>售后</li>
          <li>特殊</li>
          <li>其他</li>
        </ul>
        <div class="layui-tab-content"></div>
      </div> 
      <form class="layui-form" action="">
        <div class="search layui-clear">
          <div class="layui-col-xs6" style="position: relative;">
            <img src="img/search.png" alt="" style="position: absolute;left:12px; top:9px;">
            <input style="padding-left:40px; " type="text" name="zskSearch" required  lay-filter="zskSearch" placeholder="请输入问题或关键词" autocomplete="off" class="layui-input">
          </div>
          <div class="layui-col-xs6">
            <button class="layui-btn" type="button" style="width: 130px; margin-left: 20px;" id="search" lay-submit lay-filter="zskSearchBtn">检索</button>
          </div>
        </div>
      </form>
      <blockquote class="layui-elem-quote layui-quote-nm selectBox">
        <div class="topSelect">
          <div class="l">您已选择：</div>
          <div class="r" id="selected">
            <a id="fl_1" class="twoLevel" href="javascript:;"><span>仕馨ERP</span>&times;</a>
            <a id="fl_2" class="twoLevel" href="javascript:;"><span>仕馨ERP</span>&times;</a>
            <span class="ver"></span>
            <a id="bq_1" class="bq" href="javascript:;"><span>会员卡</span>&times;</a>
            <a id="bq_2" class="bq" href="javascript:;"><span>仕馨小程序</span>&times;</a>
            <a id="bq_2" class="bq" href="javascript:;"><span>仕馨小程序</span>&times;</a>
            <a id="bq_2" class="bq" href="javascript:;"><span>仕馨小程序</span>&times;</a>
            <a id="bq_2" class="bq" href="javascript:;"><span>仕馨小程序</span>&times;</a>
            <a id="bq_2" class="bq" href="javascript:;"><span>仕馨小程序</span>&times;</a>
            <a id="bq_2" class="bq" href="javascript:;"><span>仕馨小程序</span>&times;</a>
            <a id="bq_2" class="bq" href="javascript:;"><span>仕馨小程序</span>&times;</a>
            <a id="bq_2" class="bq" href="javascript:;"><span>仕馨小程序</span>&times;</a>
            <a id="bq_2" class="bq" href="javascript:;"><span>仕馨小程序</span>&times;</a>
            <a id="bq_2" class="bq" href="javascript:;"><span>仕馨小程序</span>&times;</a>
            <a id="bq_2" class="bq" href="javascript:;"><span>仕馨小程序</span>&times;</a>
            <a id="bq_2" class="bq" href="javascript:;"><span>仕馨小程序</span>&times;</a>
          </div>
        </div>
        <div class="classList" id="fl">
          <div class="l">二级分类：</div>
          <div class="r ac_class">
            <a id="1" href="javascript:;">社群</a>
            <a id="2" href="javascript:;">社群</a>
            <a id="1" href="javascript:;">社群</a>
            <a id="2" href="javascript:;">社群</a>
            <a id="1" href="javascript:;">社群</a>
            <a id="2" href="javascript:;">社群</a>
            <a id="1" href="javascript:;">社群</a>
            <a id="2" href="javascript:;">社群</a>
            <a id="1" href="javascript:;">社群</a>
            <a id="2" href="javascript:;">社群</a>
            <a id="1" href="javascript:;">社群</a>

          </div>
          <div class="more">
            <span>更多</span> 
            <i class="layui-icon iconBox iconBox1" style="font-size: 14px; color: #aaaaaa; border:1px solid #dddddd;padding:3px;cursor: pointer;">&#xe61a;</i><i class="layui-icon iconBox iconBox2" style="display: none; font-size: 14px; color: #aaaaaa; border:1px solid #dddddd;padding:3px;cursor: pointer;">&#xe619;</i>
          </div>
        </div>
        <div class="classList" style="border-bottom:none" id="bq">
          <div class="l" style="padding-right: 28px">标签：</div>
          <div class="r ac_class">
            <a id="1" href="javascript:;">社群</a>
            <a id="2" href="javascript:;">社群</a>
          </div>
          <div class="more">
            <span>更多</span> 
            <i class="layui-icon iconBox iconBox1" style="font-size: 14px; color: #aaaaaa; border:1px solid #dddddd;padding:3px;cursor: pointer;">&#xe61a;</i><i class="layui-icon iconBox iconBox2" style="display: none; font-size: 14px; color: #aaaaaa; border:1px solid #dddddd;padding:3px;cursor: pointer;">&#xe619;</i>
          </div>
        </div>
      </blockquote>
      <p class="results">为您检索到相关结果共100个：</p>
      <ul class="searchList">
        <li>
          <div class="topQuestion">
            <div class="l">
              <img src="img/q.png" alt="">
              <div class="title">社群的会员卡功能怎么用？社群的会员卡功能怎么用？社群的会员卡功能怎么用？社群的会员卡功能怎么用？ </div>
            </div>
            <div class="r">
              <button class="layui-btn checkAnswer" type="button" style="width: 112px; margin-top: 30px;">查看答案</button>
            </div>
          </div>
          <div class="centerAnswer">
            <div class="content">
              <div class="l target1">
                this is answer line1
              </div>
              <div class="r">
                <button class="layui-btn copy_button" type="button" style="width: 112px; border: 1px solid #fff;background: #fff;color: #55c33b" ata-clipboard-action="copy" data-clipboard-target=".target1">复制</button>
                <button class="layui-btn PackUp" type="button" style="width: 112px; border: 1px solid #fff;background: #fff;color: #55c33b;margin-left:0;margin-top: 10px;">收起</button>
              </div>
            </div>
          </div>
          <div class="bottomType">
            <span>分类：社群</span>
            <span class="hVer"></span>
            <span>标签：会员卡、会员</span>
          </div>
        </li>
        <li>
          <div class="topQuestion">
            <div class="l">
              <img src="img/q.png" alt="">
              <div class="title">社群的会员卡功能怎么用？社群的会员卡功能怎么用？社群的会员卡功能怎么用？社群的会员卡功能怎么用？ </div>
            </div>
            <div class="r">
              <button class="layui-btn checkAnswer" type="button" style="width: 112px; margin-top: 30px;">查看答案</button>
            </div>
          </div>
          <div class="centerAnswer">
            <div class="content">
              <div class="l target2">
                this is answer line2
              </div>
              <div class="r">
                <button class="layui-btn copy_button" type="button" style="width: 112px; border: 1px solid #fff;background: #fff;color: #55c33b" ata-clipboard-action="copy" data-clipboard-target=".target2">复制</button>
                <button class="layui-btn PackUp" type="button" style="width: 112px; border: 1px solid #fff;background: #fff;color: #55c33b;margin-left:0;margin-top: 10px;">收起</button>
              </div>
            </div>
          </div>
          <div class="bottomType">
            <span>分类：社群</span>
            <span class="hVer"></span>
            <span>标签：会员卡、会员</span>
          </div>
        </li>
      </ul>
      <div id="page" style="margin-top: 30px;text-align: center"></div>
  </div>
  
  <div class="layui-footer" style="left: 0">
    <!-- 底部固定区域 -->
    Copyright@2012-2016 ibona.cn　All Right Reserved. 粤ICP备 14099207号-4 版权所有@深圳博纳移动信息技术有限公司<br>
咨询热线：40007 22217 　公司总部：深圳福田区金地工业园127栋2层
  </div>
</div>
<script src="js/layui.js"></script>
<script src="js/jquery.min.js"></script>
<script src="js/common.js"></script>
<script>    
    $(document).ready(function(){    
        var targetText=$("#target").text();    
        var clipboard = new Clipboard('.copy_button');    
    
        clipboard.on('success', function(e) {    
            console.info('Action:', e.action);    
            console.info('Text:', e.text);    
            console.info('Trigger:', e.trigger);    
            layer.msg('复制成功');     
            e.clearSelection();    
        }); 
        //已选择列表设置字体颜色
        $('.topSelect .r .ver').prevAll().find('span').css('color','#6acb54')
        $('.topSelect .r .ver').nextAll().find('span').css('color','#1b9fe4')
        //查看答案
        $('.checkAnswer').on('click',function(){
          $(this).parents('.topQuestion').css('padding-bottom','0')
          $(this).parents('.topQuestion').siblings('.centerAnswer').slideDown()
        })
        //收起
        $('body').on('click','.PackUp',function(){
          $(this).parents('.centerAnswer').hide()
          $(this).parents('.centerAnswer').siblings('.topQuestion').css('padding-bottom','20px')
        })
        //点击分类
        $('#fl .r a').on('click',function(){
          selectList(1,this)
        })
        //点击标签
        $('#bq .r a').on('click',function(){
          selectList(2,this)
        })
        //删除列表
        $('body').on('click','.topSelect .r a',function(){
          $(this).remove();
        })
        //更多
        $('body').on('click','.iconBox',function(){
          if($(this).siblings('span').text()=='更多'){
            $(this).parent().siblings('.r').removeClass('ac_class');
            $(this).siblings('span').text('收起');
            $(this).hide();
            $(this).siblings('.iconBox2').show();
          }else if($(this).siblings('span').text()=='收起'){
            $(this).parent().siblings('.r').addClass('ac_class');
            $(this).siblings('span').text('更多');
            $(this).hide();
            $(this).siblings('.iconBox1').show();
          }
        })
    }); 
    //选择列表
    function selectList(type,obj){
      var $html=$(obj).text();
      var $id=$(obj).attr('id');
      var $a='<a id="'+$id+'" class="twoLevel" href="javascript:;"><span>'+$html+'</span>&times;</a>';
      if(type==1){
        $('#selected').find('.ver').before($a);
        $('.topSelect .r .ver').prevAll().find('span').css('color','#6acb54')
      }else if(type==2){
        $('#selected').append($a)
        $('.topSelect .r .ver').nextAll().find('span').css('color','#1b9fe4')
      }
    }  
</script> 
<script>
//JavaScript代码区域
layui.use('element', function(){
  var element = layui.element;
});

</script>
</body>
</html>